@import '@/styles/variables.scss';


.assist-container {
  width: 213px;
  height: 248px;
  box-sizing: border-box;
  padding: 20px 5px;
  z-index: 2000;
  pointer-events: auto;
  // background: url('~@/assets/img/plot/assistBg.png') no-repeat center / 100% 100%;

  .assist-container__content {
    height: 100%;
    width: 100%;

    li {
      float: left;
      position: relative;
      width: 58px;
      height: 58px;
      margin: 0 4px 10px 4px;
      box-sizing: border-box;
      cursor: pointer;
      background: url('~@/assets/img/plot/ct.png') no-repeat center / 100% 100%;

      &:hover {
        background-image: url('~@/assets/img/plot/dj.png');
      }

      .assist-container__icon {
        display: block;
        width: 54px;
        height: 54px;
      }

      p {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 100%;
        font-size: 12px;
        text-align: center;
      }
    }

    .isSelect {
      background-image: url('~@/assets/img/plot/dj.png');
    }
  }
}
